.frame{
    position: absolute;
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -200px;
    border-radius: 3px;
    box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);
    background: linear-gradient(to top right, #ff0000, #f1a43e);
    color: #fff;
}

.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.menu_icon{
    box-sizing: border-box;
    width: 80px;
    height: 80px;
    padding: 10px 0;
    cursor: pointer;
    /* background-color: #fff3; */

    .line1,.line2,.line3{
        width: 100%;
        height: 8px;
        background-color: #fff;
        border-radius: 3px;
        box-shadow: 0 2 10px 0 rgba(0,0,0,0.3);
    }

    .line1{
        animation: animate_1_rev 0.7s ease-in-out;
    }
    .line2{
        margin: 16px 0;
        animation: animate_2_rev 0.7s ease-in-out;
    }
    .line3{
        animation: animate_3_rev 0.7s ease-in-out;
    }

    &.active{
        .line1{
            animation: animate_1 0.7s cubic-bezier(0.3,1,0.7,1) forwards;
        }
        .line2{
            animation: animate_2 0.7s cubic-bezier(0.3,1,0.7,1) forwards;
        }
        .line3{
            animation: animate_3 0.7s cubic-bezier(0.3,1,0.7,1) forwards;
        }
    }
}

.no_animation{
    animation: none !important;
}

@keyframes animate_1{
    0%{ transform: translate3d(0,0,0) rotate(0deg); }
    50%{ transform: translate3d(0,24px,0) rotate(0deg); }
    100%{ transform: translate3d(0,24px,0) rotate(45deg); }
}

@keyframes animate_2{
    0%{ transform: scale(1);opacity: 1; }
    100%{ transform: scale(0);opacity: 0; }
}

@keyframes animate_3{
    0%{ transform: translate3d(0,0,0) rotate(0deg); }
    50%{ transform: translate3d(0,-24px,0) rotate(0deg); }
    100%{ transform: translate3d(0,-24px,0) rotate(135deg); }
}

@keyframes animate_1_rev{
    100%{ transform: translate3d(0,0,0) rotate(0deg); }
    50%{ transform: translate3d(0,24px,0) rotate(0deg); }
    0%{ transform: translate3d(0,24px,0) rotate(45deg); }
}

@keyframes animate_2_rev{
    100%{ transform: scale(1);opacity: 1; }
    0%{ transform: scale(0);opacity: 0; }
}

@keyframes animate_3_rev{
    100%{ transform: translate3d(0,0,0) rotate(0deg); }
    50%{ transform: translate3d(0,-24px,0) rotate(0deg); }
    0%{ transform: translate3d(0,-24px,0) rotate(135deg); }
}